<template>
  <div class='app-container'>
    <div class="setting" v-if="orderSettingForm">
      <el-form :inline="true" :model="orderSettingForm" class="demo-form-inline">
        <el-form-item label="秒杀订单超过：" v-if="orderSettingForm.flashOrderOvertime">
          <el-input v-model="orderSettingForm.flashOrderOvertime" clearable />
          <div class="last">分</div>
          <div>未付款，订单自动关闭</div>
        </el-form-item>
        <el-form-item label="正常订单超过：" v-if="orderSettingForm.normalOrderOvertime">
          <el-input v-model="orderSettingForm.normalOrderOvertime" clearable />
          <div class="last">分</div>
          <div>未付款，订单自动关闭</div>
        </el-form-item>
        <el-form-item label="发货超过：" class="fahuo" v-if="orderSettingForm.confirmOvertime">
          <el-input v-model="orderSettingForm.confirmOvertime" clearable />
          <div class="last">天</div>
          <div>未收货，订单自动完成</div>
        </el-form-item>
        <el-form-item label="订单完成超过：" v-if="orderSettingForm.finishOvertime">
          <el-input v-model="orderSettingForm.finishOvertime" clearable />
          <div class="last">天</div>
          <div>自动结束交易，不能申请售后</div>
        </el-form-item>
        <el-form-item label="订单完成超过：" v-if="orderSettingForm.commentOvertime">
          <el-input v-model="orderSettingForm.commentOvertime" clearable />
          <div class="last">天</div>
          <div>自动五星好评</div>
        </el-form-item>
        <el-button type="primary" class="btn" @click="handleSubmit">提交</el-button>
      </el-form>
    </div>
    <div v-if="!orderSettingForm" class="not">暂无数据</div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import * as orderSetting from "@/request/orderSetting"
import { ElMessageBox, ElMessage } from 'element-plus';
const orderSettingForm = ref<IOrderSettingResultModel>({
  id: undefined,
  commentOvertime: undefined,
  confirmOvertime: undefined,
  finishOvertime: undefined,
  flashOrderOvertime: undefined,
  normalOrderOvertime: undefined
})
const route = useRoute()
watch(() => route.query, () => {
  if (route.query.id) {

    orderSettingForm.value.id = route.query.id as any
    orderSetting.getOrderSettingById(orderSettingForm.value.id!).then(res => {
      if (res.code === 200) {
        orderSettingForm.value = res.data
      }
    })
  } else {
    orderSettingForm.value.id = 1
    orderSetting.getOrderSettingById(orderSettingForm.value.id).then(res => {
      if (res.code === 200) {
        orderSettingForm.value = res.data
      }
    })
  }

}, {
  immediate: true
})
// 修改数据
const handleSubmit = () => {
  ElMessageBox.confirm(
    '您确定要修改吗？',
    '修改信息',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      orderSetting.updateOrderSettingById({ id: orderSettingForm.value.id!, orderSetting: orderSettingForm.value }).then(res => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: '已成功修改',
          })
        } else {
          ElMessage({
            type: 'error',
            message: res.message,
          })
        }

      })

    })
    .catch(() => {
      ElMessage({
        type: 'success',
        message: '已取消修改操作',
      })
    })
}
</script>

<style lang="less" scoped>
.not {
  font-size: 36px;
  text-align: center;
}

.setting {
  width: 800px;
  padding: 40px 20px;
  box-shadow: 2px 3px 11px -5px;
  position: absolute;
  top: 50%;
  left: 56%;
  transform: translate(-50%, -50%);
}

.el-form-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .el-input {
    border: 1px solid #82858b;
  }

  .last {
    color: #82858b;
    padding: 0 20px;
    background-color: #f5f7fa;
    border: 1px solid #82858b;
    border-left: 0;
    margin-right: 12px;
  }
}

.el-form {
  padding-left: 130px;
}

.fahuo {
  padding-left: 28px;
}

.btn {
  position: absolute;
  left: 31%;
}
</style>